import classNames from 'classnames';
import { WeaLocaleProvider } from "ecCom";
import _ from "lodash";
import React from "react";
import { comsType, modeTypes, viewTypes } from "../../../../../constants/form";
import utils from '../../../../../utils';
import { formatSubTitle } from "../../../../../utils/format";
import { Consumer } from "../../theme";
import FieldError from "../../view/field/Error";
import { isWrapper } from "../typeof";
import './View.less';

const { getLabel } = WeaLocaleProvider;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

const { VIEW } = modeTypes;
const { ATTACHMENT, PICTURE, SIGNATURE } = comsType;
const { PC, MOBILE, MOBILE_WX, READONLY } = viewTypes;
const dividerStyle = {
  marginBottom: '10px',
  borderTop: '1px dashed #aab2bd'
};

export default class View extends React.Component {

  renderKey = utils.UUID();

  /**
   * 针对使用原生html元素的插件 需要通过e.target.value获取值
   * @param {Event} e Native event
   */

  handleValueChangeForNE = e => {
    const { onChange } = this.props;
    const value = e.target.value;

    onChange(value);
  }

  handleValueChange = newVal => {
    const { onChange = () => { }, value } = this.props;
    const val = this.formatValue(newVal, value);

    onChange(val);
  }

  showDocFile = (link) => {
    window.open(link, '_blank')
  }

  _renderContent(data, value, isMobile) {
    const { viewType, type } = this.props;
    const isReadonly = READONLY === viewType;

    if ((type === PICTURE || type === ATTACHMENT || type === SIGNATURE)) {
      if (!data.isSetCategory) return this.renderForNoCubeCategory();
    }

    if (isReadonly) {
      return (
        <div className='wea-edc-com-readonly'>
          {this.renderForReadonly(...arguments)}
        </div>
      );
    }

    if (this.renderContent) {
      return this.renderContent(...arguments);
    }

    switch (viewType) {
      case MOBILE:
      case MOBILE_WX:
        return this.renderForMobile(...arguments);
      default:
        return this.renderForPC(...arguments);
    }
  }

  _getSubTitle(data) {
    if (this.getSubTitle) {
      return this.getSubTitle(...arguments);
    }
    return "";
  }

  shouldRender() { return true; }
  renderExtra() { return null; }
  renderForPC() { return null; }
  renderForMobile() { return null; }
  renderForReadonly(data, value) {
    value = _.isString(value) ? value : '';

    return <div>{value}</div>;
  }

  renderForNoCubeCategory() {
    return (
      <div className={'wea-edc-com-tips'}>
        <FieldError ecId={`${this && this.props && this.props.ecId || ''}_FieldError@81gf6d`} error={getLabel('511746', '附件上传目录未设置')} />
      </div>
    );
  }

  formatValue(val) { return val; }

  hasDivider() {
    const { data: { divider }, type } = this.props;

    return 'description' === type.toLowerCase() && 1 == divider;
  }

  getWrapperStyle(field) {
    const hasDivider = this.hasDivider();
    const style = { paddingBottom: field.space };

    if (hasDivider) {
      style.paddingTop = 10;
    }

    return style;
  }

  render() {
    const { type, data, value, viewType = PC, modeType } = this.props;
    let { title, disableTitle = false, desc, required, align = 'vertical', subTitle, readOnly } = data;
    const isReadonly = READONLY === viewType;
    const isDesign = modeTypes.DESIGN === modeType;

    subTitle = subTitle || this._getSubTitle(data);

    if (!this.shouldRender()) return null;
    const clsNameStr = classNames(`wea-edc-form-${type.toLowerCase()}`, {
      'wea-edc-wrapper-com': isWrapper({ type }),
      'wea-edc-noedit-com': readOnly === '1',
      'wea-edc-noedit-cursor': readOnly === '1' && isDesign
    });

    return (
      <Consumer ecId={`${this && this.props && this.props.ecId || ''}_Consumer@4t7wn8`}>
        {({ field, isSetCategory, formmodeId }) => (
          <div
            className={classNames(clsNameStr, { horizontal: 'horizontal' === align })}
            style={this.getWrapperStyle(field)}
          >
            {!this.hasDivider() ? null : <div style={dividerStyle} />}
            {
              disableTitle ? null :
                <div className='wea-edc-com-title'>
                  <label style={field.css}>
                    <span className={required === '1' && 'wea-edc-com-required'}>
                      {formatMultiLang(title)}
                      {!subTitle ? null : <span className='wea-edc-com-subTitle'>{`(${formatSubTitle(subTitle)})`}</span>}
                    </span>
                    {!isReadonly && this.renderExtra()}
                  </label>
                  {(viewType === READONLY || !desc) ? null : <label className='wea-edc-com-desc' dangerouslySetInnerHTML={{ __html: desc }} />}
                </div>
            }
            {this._renderContent('isSetCategory' in data ? data : Object.assign({}, data, { isSetCategory: isSetCategory, formmodeId: formmodeId }), value, [MOBILE_WX, MOBILE].includes(viewType))}
            {this.props.children}
          </div>
        )}
      </Consumer>
    );
  }
}

View.defaultProps = {
  viewType: PC,
  modeType: VIEW,
  onChange: () => { },
  toggleFooterDisable: () => { }
};